<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>SLSystem</title>
    <meta name="keywords" content="面向学习型的开源框架，简洁高效，杜绝过渡封装，展现技术本质本质">
    <meta name="description" content="面向学习型的开源框架，简洁高效，杜绝过渡封装，展现技术本质本质">
    <link rel="shortcut icon" href="../../static/favicon.ico">
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/css/plugins/toastr/toastr.min.css" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">
    <script src="/js/jquery.min.js?v=2.1.4" th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
    <script src="/js/bootstrap.min.js?v=3.3.6" th:src="@{/js/bootstrap.min.js?v=3.3.6}"></script>
    <script src="/js/bootstrap-select.js?v=3.3.6" th:src="@{/js/bootstrap-select.js?v1.6.3}"></script>

    <!-- 自定义js -->
    <script src="/js/content.js?v=1.0.0" th:src="@{/js/content.js?v=1.0.0}"></script>

    <script type="text/javascript" src="/js/plugins/layer/laydate/laydate.js"></script>

    <!-- jQuery Validation plugin javascript-->
    <script src="/js/ajax-util.js"></script>
    <script src="/js/plugins/validate/jquery.validate.min.js" th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>
    <script src="/js/plugins/validate/messages_zh.min.js" th:src="@{/js/plugins/validate/messages_zh.min.js}"></script>
    <script src="/js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}"></script>

    <!-- jQuery Validation plugin javascript-->
    <script src="/js/ajax-util.js"></script>
    <script src="/js/plugins/validate/jquery.validate.min.js" th:src="@{/js/plugins/validate/jquery.validate.min.js}"></script>
    <script src="/js/echarts.min.js"></script>

</head>
<body class="gray-bg">
<!--<body>-->
			<div id="weight"  style="width: 600px;height:400px;margin: 0 auto"></div>
            <div id="blood"   style="width: 600px;height:400px;margin: 0 auto"></div>
			<script type="text/javascript">
                $(document).ready(function () {
                    //异步请求
                    $.ajax({
                        type:"POST",
                        datatype:"json",
                        url:"/healthinfo/getweight",
                        success:function(data){
                            console.log(data);
                            generateWeightChart(data);
                            generateBloodChart(data);
                        },
                    });
                });

                function generateWeightChart(data) {
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('weight'));
                    myChart.clear();
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '体重轨迹图'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        //数据全部显示
                        axisLabel: {
                            interval: 0
                        },
                        legend: {
                            data:['体重(kg)']
                        },
                        xAxis: {
                            data:data.xAxisList
                        },
                        yAxis: {
                            type:'value',
                            axisLabel:{
                                formatter:'{value}kg'
                            }
                        },
                        series: [{
                            name: '体重(kg)',
                            type: 'line',
                            data: data.seriesWeightList
                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }

                function generateBloodChart(data) {
                    //血压相关
                    var bloodChart = echarts.init(document.getElementById('blood'));
                    bloodChart.clear();
                    // 指定图表的配置项和数据
                    var option2 = {
                        title: {
                            text: '血压轨迹图'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['高压(mmhg)', '低压(mmhg)']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            //boundaryGap: false,
                            data:data.xAxisList
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel:{
                                formatter:'{value}mmHg'
                            }
                        },
                        series: [
                            {
                                name: '高压(mmhg)',
                                type: 'line',
                                stack: '总量',
                                data: data.seriesHBloodList
                            },
                            {
                                name: '低压(mmhg)',
                                type: 'line',
                                stack: '总量',
                                data: data.seriesLBloodList
                            }

                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    bloodChart.setOption(option2);
                }
			</script>
</body>
</html>